<template>
  <div>
    <van-nav-bar
      title="我的地址管理"
      left-text="返回"
      left-arrow
      @click-left="back"
    />

    <div class="all">
      <p>我的收货地址</p>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        default-tag-text="默认"
        @add="goAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { getget } from "../../../utils/request";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

let store = useStore();
const router = useRouter();
const list = ref([]);
const chosenAddressId = ref(null);
// 请求获取列表
const getList = async () => {
  let res = await getget("/address", sessionStorage.getItem("token"));
  res.result.forEach((item) => {
    if (item.default_set == "1") {
      chosenAddressId.value = item.id;
    }
    let addressItem = {
      id: item.id,
      name: item.name,
      tel: item.phone,
      address: item.area_name + item.desc,
      isDefault: item.default_set == "1" ? true : false,
    };
    list.value.push(addressItem);
    console.log(list);
  });
};
getList();
// 返回按钮
const back = () => history.back();
// 跳转新增地址
const goAdd = () => {
  router.push("/newAddress");
};
// 跳转编辑地址
const onEdit = () => {
  store.commit("user/getId", chosenAddressId.value);
  router.push("/changeAddress");
};
</script>

<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  p {
    font-size: 16px;
    margin-left: 15px;
  }
}
</style>
